1. Unzip the “wonder-theme.zip” file.
2. On Blogger Dashboard Click Template.
3. Click Backup/Restore button (Top Right).
4. Click Choose File button. Find where the “wonder-theme.xml” file location.
5. Then Click Upload.

NB: Before Uploading This Template Mobile Blogger Template Must Enable to make Blogger Customize Work

After installing the theme, this it the minimun setting to make all widget works fine in this themes.

1. On Blogger Dashbord Click Layout
2. Click Edit (Featured Articles)
3. Paste This Code in the blank Space :
   
   

   <script src='/feeds/posts/summary/-/Hollywood?max-results=3&amp;orderby=published&amp;alt=json-in-script&amp;callback=recentthumbs&amp;' type='text/javascript'></script>
   <p class="viewmore"><a href="/search">View More Articles</a></p>

4. Change "Hollywood" with yours label name.
5. Change "/search" with your label url.
6. Click Save

1. On Blogger Dashbord Click Layout
2. Click Edit (Cars)
3. Paste This Code in the blank Space :
   
   

   <div id="new_latest_post_main">
   <script style="text/javascript">
       var showpostsummary_gal  	= false;
   	var random_posts       		= true;
   	var numchars_gal			= 150;
   	var numposts_gal			= 4;
   	var post_image_width		= 550;
   	var post_image_height   	= 250;
   </script>
   <script src="/feeds/posts/default/-/Cars?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=999999"></script>
   
   </div>

4. Change "Cars" with yours label name.
5. Change "var numposts_gal" if you want to show more or less posts.
6. Click Save

1. On Blogger Dashbord Click Layout
2. Click Edit (Slider)
3. Paste This Code in the blank Space :
   
   

   <div class="flex-container">
     <div class="flexslider">
       <ul class="slides">
        <li>
           <img src="http://2.bp.blogspot.com/-DYsMIJ_6juo/UwCHJ36qNlI/AAAAAAAACWU/UPXWgtXYElM/s1600/4952370052_52f4a93158_o.jpg" />
           <p class="flex-caption"> <a href="http://itsreallywonder.blogspot.com/2014/02/madagascar-3-african-animals-are-back.html">This is a long caption made for Demonstration Purpose and as said is long.</a></p>
         </li>
         <li>
           <img src="http://3.bp.blogspot.com/-8ul-ZyckPyw/UmT_SCGWGuI/AAAAAAAAEy8/WV5L75SEMaY/s1600/Plana_landscape_photography_1789_Iordan_Hristov_web_blog.jpg" />
           <p class="flex-caption"><a href="http://itsreallywonder.blogspot.com/2013/11/a-sample-post-with-comments.html">A good average sized caption for all.</a></p>
         </li>
         <li>
           <img src="http://1.bp.blogspot.com/-DNNS8KZQBIE/UwCHI7SG6sI/AAAAAAAACWQ/rNghrw7us0s/s1600/3010504684_ab39b5357f_z.jpg" />
   <p class="flex-caption">A caption without link.</p>
         </li>
       </ul>
     </div>
   </div>

4. Change the "Image link and Title text" with yours desired image and title name.
5. Click Save

1. On Blogger Dashbord Click Layout
2. Click Edit (Fashion)
3. Paste This Code in the blank Space :
   
   

   <script src='/feeds/posts/default/-/Fashion?orderby=published&amp;alt=json-in-script&amp;callback=showrecentpostswiththumbs&amp;max-results=4'/></script>

4. Change "Fashion" with yours label name.
5. Change "max-results=4" if you want to show more or less posts.
6. Click Save

1. On Blogger Dashbord Click Layout
2. Click Edit (Technology)
3. Paste This Code in the blank Space :
   
   

   <script type='text/javascript'>
   var numposts = 4;
   var showpostthumbnails = true;
   var displaymore = false;
   var displayseparator = true;
   var showcommentnum = false;
   var showpostdate = false;
   var showpostsummary = true;
   var numchars = 100;
   </script> 
   <script type="text/javascript" src="/feeds/posts/default/-/Tech?published&alt=json-in-script&callback=labelthumbs"></script>

4. Change "Tech" with yours label name.
5. Change "var numposts = 4;" if you want to show more or less posts.
6. Click Save

1. On Blogger Dashbord Click Layout
2. Click Edit (Sports)
3. Paste This Code in the blank Space :
   
   

   <script type='text/javascript'>
   var numposts = 4;
   var showpostthumbnails = true;
   var displaymore = false;
   var displayseparator = true;
   var showcommentnum = false;
   var showpostdate = false;
   var showpostsummary = true;
   var numchars = 100;
   </script> 
   <script type="text/javascript" src="/feeds/posts/default/-/Sports?published&alt=json-in-script&callback=labelthumbs"></script>

4. Change "Sports" with yours label name.
5. Change "var numposts = 4;" if you want to show more or less posts.
6. Click Save

To change text on Error Page follow this step

1. On Blogger Dashbord Click Settings
2. Click Search Preference
3. Edit Custom Page Not Found
4. Paste the code in blank Space:
   
   

   <div class='sb-404-box'>
     <p style='line-height: 30px'><strong>
   <font color='#ff0000' size='5'>
   Oops!
   </font> <font color='#666666'>
   Looks like you either clicked a broken link or a Page that no more exits. Kindly do one of the followings:
   </font></strong></p>
     <ol style='line-height: 25px'> 
       <li><a href='javascript:history.goundefined-1)'>&#171; Go Back</a> </li>
       <li>Report the Problem to us by <a href='#'>Clicking Here</a>&#160;&#160;&#160; undefined<em>This will help us serve you even better</em>) </li>
       <li>Go To Homepage by <a href='#'>Clicking Here</a> 
         <br/></li> 
     </ol>
     <p> 
       <br/>
       <br/>
       <br/></p>
     <p align='center'><font color='#0080ff' style='font-size: 150px'><strong>404</strong></font></p>
     <p>&#160;</p>
     <p align='center'/>
     <p align='center'><font size='5'>Page Not Found!</font></p> 
   </div>

5. Change "#" with your's Homepage and Contact page link
6. Click Save Settings

1. On Blogger Dashbord Click Template
2. Click Edit HTML
3. Scroll down and Find this Code :
   
   

   $undefineddocument).readyundefinedfunctionundefined){var e="",t=10;$.ajaxundefined{url:"/feeds/posts/default?alt=json-in-script&max-results="+t+"",type:"get",dataType:"jsonp",success:functionundefinede){var t,n,r="",i=e.feed.entry;ifundefinedi!==undefined){r="<ul>";forundefinedvar s=0;s<i.length;s++){forundefinedvar o=0;o<i[s].link.length;o++){ifundefinedi[s].link[o].rel=="alternate"){t=i[s].link[o].href;break}}n=i[s].title.$t;r+='<li><a href="'+t+'" target="_blank">'+n+"</a></li>"}r+="</ul>";$undefined"#recentticker").htmlundefinedr);function uundefined){$undefined"#recentticker li:first").slideUpundefinedfunctionundefined){$undefinedthis).appendToundefined$undefined"#recentticker ul")).slideDownundefined)})}setIntervalundefinedfunctionundefined){uundefined)},5e3)}else{$undefined"#recentticker").htmlundefined"<span>No result!</span>")}},error:functionundefined){$undefined"#recentticker").htmlundefined"<strong>Error Loading Feed!</strong>")}})})

1. On Blogger Dashbord Click Template
2. Click Edit HTML
3. Scroll down and Find this Code :
   
   

   <div class='social_icons'><a class='social twitter' href='http://twitter.com'/><a class='social linkedin' href='http://linkedin.com'/><a class='social facebook' href='http://facebook.com'/><a class='social vimeo' href='http://vimeo.com'/></div><div class='clear'/></div>

4. Change Site links with your social profile links.

1. On Blogger Dashbord Click Template
2. Click Edit HTML
3. Scroll down and Find this Code :
   
   

   <div class='about-author'>
   <h5 class='boxtitle'>About Author</h5>
   <div class='authorbox'>
   <div class='authorsocial'>
     <li><a class='fb' href='http://facebook.com/your-id' rel='nofollow'/></li>
     <li><a class='twitter' href='http://twitter.com/your-id' rel='nofollow'/></li>
     <li><a class='google' href='https://plus.google.com/your-id' rel='author'/></li>
     <li><a class='in' href='http://in.linkedin.com/in/your-id' rel='nofollow'/></li>
   </div>
     <div class='authorinfo'>
   <img src='http://lh5.googleusercontent.com/-OknoOgILvaI/AAAAAAAAAAI/AAAAAAAADUE/Z4GOlsyzII0/s150-c/photo.jpg'/>
   <p>Donec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Sed posuere consecteturDonec sed odio dui. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. <a href='#'>Read More</a></p>
   </div>
   </div>
   </div>

4. Change Site links and text with your social profile links and bio.